<template>
    <section class="checkContentTown">
        <div v-loading="listLoad" class="checkTownDiv">
            <div style="margin-bottom: 15px">
                <el-row style="margin: 10px 0" v-if="user.roleCode !== 'TOWN_REVIEWER'">
                    <el-col :span="1" style="color: #43C089;font-weight: bold">镇级</el-col>
                    <el-col :span="23" >
                        <div v-for="(item,index) in townList" class="townStyleActive"  @click="updateCun(item,index)" v-if="index===0">{{item.districtName.replace(/党委/,'')}}</div>
                        <div v-for="(item,index) in townList" class="townStyle"  @click="updateCun(item,index)" v-if="index>0">{{item.districtName.replace(/党委/,'')}}</div>
                    </el-col>
                </el-row>
                <el-row v-if="!onlyTown">
                    <el-col :span="1"  style="color: #909399;font-weight: bold" v-if="user.roleCode !== 'TOWN_REVIEWER'">村级</el-col>
                    <el-col :span="23">
                        <div v-for="(sub,index) in cunList" class="cunStyleActive" @click="currentCun(sub,index)" v-if="index===0">{{sub.districtName.replace(/支部/,'')}}</div>
                        <div v-for="(sub,index) in cunList" class="cunStyle" @click="currentCun(sub,index)" v-if="index>0">{{sub.districtName.replace(/支部/,'')}}</div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </section>
</template>

<script>
    export default {
        name: "CheckContentTown",
        props: {
            onlyTown: {
                type: Boolean,
                default: false
            }
        },
        data(){
            return{
                user:{},
                townList:[],
                cunList:[],
                listLoad:false,
            }
        },
        methods:{
            showTownList(){
                this.listLoad = true;
                let para = {};
                let url = `identity/sysDistrict/list`;
                if(this.user.roleCode === 'TOWN_REVIEWER'){
                    para = {districtLevel:3,districtType:'Party',attachTo:this.user.districtId}
                }else{
                    para = {districtLevel:2,districtType:'Party'}
                }
                this.$http('POST',url,para,false).then(data=>{
                    if(this.user.roleCode === 'TOWN_REVIEWER'){
                        this.cunList = data;
                    }else{
                        this.townList = data;
                        this.$emit("currentTown", data[0]);
                        this.cunList = data[0].orgChildren;
                    }
                    this.listLoad = false;
                    this.$emit('currentCun',this.cunList[0].districtId);
                }).catch(()=>{
                    this.listLoad = false;
                })
            },
            initTownStyle(){
                let townArr = document.getElementsByClassName('townStyleActive');
                for(let i=0;i<townArr.length;i++){
                    townArr[i].className='townStyle';
                };
            },
            initCunStyle(){
                let cunArr = document.getElementsByClassName('cunStyleActive');
                for(let i=0;i<cunArr.length;i++){
                    cunArr[i].className='cunStyle';
                };
            },
            updateCun(item,index){
                this.initTownStyle();
                document.getElementsByClassName('townStyle')[index].className = 'townStyleActive';
                if (!this.onlyTown) {
                    this.initCunStyle();
                    document.getElementsByClassName('cunStyle')[0].className = 'cunStyleActive';
                    this.cunList = item.orgChildren;
                    this.$emit('currentCun',this.cunList[0].districtId);
                }
                this.$emit('currentTown', item);
            },
            currentCun(sub,index){
                this.initCunStyle();
                document.getElementsByClassName('cunStyle')[index].className = 'cunStyleActive';
                this.$emit('currentCun',sub.districtId);
            }
        },
        mounted() {
            this.user = this.$store.state.userInfo;
            this.showTownList();
        }
    }
</script>

<style scoped>
    .checkContentTown .townStyle{
        display: inline-block;
        margin: 0 15px;
        padding: 0 10px;
        border-radius: 5px;
    }
    .checkContentTown .townStyle:hover{
        background: linear-gradient(-27deg,rgba(27,165,104,1),rgba(58,201,138,1));
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
        color: #fff;
        cursor: pointer;
    }
    .checkContentTown .townStyleActive{
        display: inline-block;
        margin: 0 15px;
        padding: 0 10px;
        border-radius: 5px;
        background: linear-gradient(-27deg,rgba(27,165,104,1),rgba(58,201,138,1));
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
        color: #fff;
        cursor: pointer;
    }

    .checkContentTown .cunStyle{
        display: inline-block;
        margin: 5px 15px;
        padding: 0 10px;
        border-radius: 5px;
    }
    .checkContentTown .cunStyle:hover{
        background: linear-gradient(-27deg,rgba(27,165,104,1),rgba(58,201,138,1));
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
        color: #fff;
        cursor: pointer;
    }
    .checkContentTown .cunStyleActive{
        display: inline-block;
        margin: 5px 15px;
        padding: 0 10px;
        border-radius: 5px;
        background: linear-gradient(-27deg,rgba(27,165,104,1),rgba(58,201,138,1));
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
        color: #fff;
        cursor: pointer;
    }
    .checkContentTown .checkTownDiv{
        text-align: left;
        font-size: 16px;
        line-height: 40px;
        margin: 30px;
        border-bottom: 2px solid #47C46C;
    }


</style>
